<template>
  <div ref="mapRef" id="container">
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import loadjs from 'loadjs'

const apiJs = 'https://map.qq.com/api/gljs?v=1.exp&key=A26BZ-DJC65-HQQIA-I3KJ3-FOVFH-P4BB3'
const mapRef = ref(null)
const map = ref(null)
const buildMap = () => {
  // eslint-disable-next-line no-undef
  const center = new TMap.LatLng(44.879297991015854, 84.96934224205313)
  // eslint-disable-next-line no-undef

  map.value =  new TMap.Map(mapRef.value, {
    center, // 设置地图中心点坐标
    zoom: 8, // 设置地图缩放级别
    mapStyleId: 'style1',
    showControl: false,
    baseMap: {
      type: 'vector',
      // features: ['base', ], // 隐藏矢量文字
    },
    // renderOptions: {
    //   enableBloom: true, // 是否启用泛光效果 注：为true才会有效果
    // }
  }).on('dragend', () => {
  })

}

onMounted(()=> {

  loadjs(apiJs, () => {
    buildMap()
  })
})
</script>

<style lang="scss" scoped>
#container {
  background-color: #16192b;
  height: 100vh;
  max-width: 100vw;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: url("@/assets/bg.png");
  background-position: -1670px -489px;
}
</style>
